<template>
  <view class="iphone-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <navigator open-type="navigateBack" class="nav-back">
        <view class="back-arrow"></view>
      </navigator>
      <view class="nav-title">注册账号</view>
    </view>

    <!-- Logo和应用名称 -->
    <view class="logo-container">
      <view class="logo">
        <view class="logo-icon">
          <view class="logo-line"></view>
          <view class="logo-line"></view>
          <view class="logo-line"></view>
        </view>
      </view>
      <view class="logo-text">传奇IM</view>
    </view>

    <!-- 注册表单 -->
    <view class="form-container">
      <view class="input-group">
        <input type="number" v-model="form.phone" class="input-field" placeholder="请输入手机号" />
      </view>
		<view class="input-group">
        <input type="text" v-model="form.invitationCode" class="input-field" placeholder="请输入邀请码" />
      </view>
      <view class="input-group verification-group">
        <view class="verification-input">
          <input type="text" v-model="form.code" class="input-field" placeholder="请输入验证码" />
        </view>
        <button class="verification-btn" @click="getCode">获取验证码</button>
      </view>

      <view class="input-group">
        <input
          :type="showPassword ? 'text' : 'password'"
          v-model="form.password"
          class="input-field"
          placeholder="请设置密码"
        />
        <view class="input-icon" @click="showPassword = !showPassword">
          <view class="eye-icon">
            <view class="eye-outer"></view>
            <view class="eye-inner"></view>
          </view>
        </view>
      </view>

      <view class="input-group">
        <input
          :type="showConfirmPassword ? 'text' : 'password'"
          v-model="form.confirmPassword"
          class="input-field"
          placeholder="请确认密码"
        />
        <view class="input-icon" @click="showConfirmPassword = !showConfirmPassword">
          <view class="eye-icon">
            <view class="eye-outer"></view>
            <view class="eye-inner"></view>
          </view>
        </view>
      </view>

      <view class="checkbox-group" @click="form.agree = !form.agree">
        <view class="custom-checkbox" :class="{ checked: form.agree }"></view>
        <text class="checkbox-label">我已阅读并同意</text>
        <navigator url="/pages/views/agreement" class="agreement-link">《用户协议》</navigator>
        <text class="checkbox-label">和</text>
        <navigator url="/pages/views/privacy" class="agreement-link">《隐私政策》</navigator>
      </view>

      <button class="register-btn" @click="submit">注 册</button>
    </view>

    <!-- 底部已有账号链接 -->
    <view class="login-link-container">
      已有账号？
      <navigator url="/pages/views/login" class="login-link">立即登录</navigator>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onUnload, onHide } from '@dcloudio/uni-app';

// 如果你项目全局扩展了 uni，比如 $groupid，建议在项目的 global.d.ts 里声明
// declare namespace uni {
//   let $groupid: string;
// }

interface RegisterForm {
  groupid: string | number;
  phone: string;
  pwd: string;
  againPwd: string;
  invitation_code: string;
  sms_code: string;
}

const form = ref({
  phone: '',
  code: '',
  password: '',
  confirmPassword: '',
  invitationCode: '',
  agree: false
});

const showPassword = ref(false);
const showConfirmPassword = ref(false);

// 统一的表单验证函数，返回错误信息或者 null 表示无错误
const validateForm = (): string | null => {
  if (!form.value.agree) return '请先同意协议';
  if (!form.value.phone) return '请输入手机号码！';
  if (!form.value.code) return '请输入验证码！';
  if (!form.value.password) return '请输入密码！';
  if (!form.value.confirmPassword) return '请再次输入密码！';
  if (form.value.password !== form.value.confirmPassword) return '两次输入密码不一致！';
  if (!form.value.invitationCode) return '请输入邀请码！';
  return null;
};

// 获取验证码
const getCode = async () => {
  if (!form.value.phone) {
    uni.showToast({
      title: '请输入手机号码！',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  try {
    const res = await uni.$http('/home/login/register_captcha', 'post', {
      phone: form.value.phone
    });

    if (res.data.code === 200) {
      uni.showToast({
        title: '验证码已发送！',
        icon: 'success',
        duration: 2000
      });
    } else {
      uni.showToast({
        title: res.data.msg,
        icon: 'none',
        duration: 2000
      });
    }
  } catch (error) {
    uni.showToast({
      title: '网络异常，请稍后重试',
      icon: 'none',
      duration: 2000
    });
  }
};

// 提交注册
const submit = async () => {
  const error = validateForm();
  if (error) {
    uni.showToast({ title: error, icon: 'none', duration: 2000 });
    return;
  }

  const registerForm: RegisterForm = {
    groupid: (uni as any).$groupid, // 如果未声明类型可先断言 any，推荐声明类型
    phone: form.value.phone,
    pwd: form.value.password,
    againPwd: form.value.confirmPassword,
    invitation_code: form.value.invitationCode,
    sms_code: form.value.code
  };

  try {
    const res = await uni.$http('/home/login/register_user', 'post', registerForm);

    if (res.data.code === 200) {
      uni.showToast({ title: '注册成功！', icon: 'success', duration: 2000 });
      setTimeout(() => {
        uni.navigateTo({ url: '/pages/views/login' });
      }, 1500);
    } else {
      uni.showToast({ title: `失败原因：${res.data.msg}`, icon: 'none', duration: 2000 });
    }
  } catch (error) {
    uni.showToast({ title: '网络异常，请稍后重试', icon: 'none', duration: 2000 });
  }
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面容器 */
.iphone-container {
  width: 100%;
  height: 100%;
  max-width: 390px;
  max-height: 844px;
  aspect-ratio: 9 / 19.5;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
}

/* 顶部导航 */
.nav-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 10px 0;
  margin-bottom: 15px;
}

.nav-back {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 16px;
  color: #333;
  padding-left: 10px;
}

.back-arrow {
  width: 10px;
  height: 10px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  margin-right: 6px;
  margin-top: 1px;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
}


/* logo 区域 */
.logo-container {
  margin-top: 20px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 80px;
  height: 80px;
  background-color: #186ef2;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(24, 110, 242, 0.2);
}

.logo-text {
  color: #186ef2;
  font-size: 22px;
  font-weight: 500;
}

/* 表单区域 */
.form-container {
  width: 100%;
  padding: 0 15px;
  max-width: 340px;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
}

.input-field {
  width: 100%;
  height: 50px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px 40px 12px 12px;
  font-size: 16px;
  transition: border-color 0.3s;
  background-color: transparent;
}

.input-field:focus {
  border-color: #186ef2;
  outline: none;
}

.input-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  cursor: pointer;
  font-size: 20px;
}

/* 验证码 */
.verification-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.verification-input {
  flex-grow: 1;
  margin-right: 10px;
}

.verification-btn {
  width: 120px;
  height: 40px;
  background-color: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.verification-btn:hover {
  background-color: #e0e0e0;
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  height: 50px;
  background-color: #186ef2;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 17px;
  font-weight: 500;
  margin-top: 30px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.register-btn:hover {
  background-color: #0d5bd7;
}

/* 用户协议 & 隐私政策 */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.6;
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
}

.custom-checkbox.checked {
  background-color: #186ef2;
  border-color: #186ef2;
}

.custom-checkbox.checked::after {
  content: '';
  width: 10px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
  margin-top: -2px;
}

.checkbox-label {
  font-size: 14px;
  color: #666;
}

.agreement-link {
  color: #186ef2;
  text-decoration: none;
  margin: 0 3px;
  white-space: nowrap;
}

/* 登录链接 */
.login-link-container {
  position: absolute;
  bottom: 30px;
  text-align: center;
  width: 100%;
  font-size: 14px;
  color: #666;
}

.login-link {
  color: #186ef2;
  text-decoration: none;
  margin-left: 5px;
}

/* logo 图标三条线 */
.logo-icon {
  position: relative;
  width: 45px;
  height: 45px;
}

.logo-line {
  position: absolute;
  background-color: white;
  border-radius: 2px;
}

.logo-line:nth-child(1) {
  width: 26px;
  height: 5px;
  top: 10px;
  left: 9px;
}

.logo-line:nth-child(2) {
  width: 18px;
  height: 5px;
  top: 20px;
  left: 9px;
}

.logo-line:nth-child(3) {
  width: 22px;
  height: 5px;
  top: 30px;
  left: 9px;
}

/* 眼睛图标 */
.eye-icon {
  width: 22px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.eye-outer {
  width: 20px;
  height: 12px;
  border: 2px solid #999;
  border-radius: 10px;
  position: absolute;
  top: 2px;
  left: 1px;
}

.eye-inner {
  width: 6px;
  height: 6px;
  background-color: #999;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 8px;
}
</style>
